<template>
  <!--    <nav>
      <router-link to="/home">Home</router-link> |
      <router-link to="/about/abc/def">About</router-link> |
      <router-link to="/testOne">TestOne</router-link> |
      <router-link to="/testTwo">TestTwo</router-link> |
      <router-link to="/testThree">TestThree</router-link> |
      <router-link to="/testFour">TestFour</router-link> |
      <router-link to="/testFive">TestFive</router-link> |
      <router-link to="/testSix">TestSix</router-link> |
    </nav>
    <router-view />-->
  <el-container class="app-container">
    <el-header height="64px">
      <head-line></head-line>
    </el-header>
    <el-container>
      <el-aside
        :class="{ 'aside-short': isCollapse, 'aside-long': !isCollapse }"
      >
        <el-menu
          router
          unique-opened
          :background-color="colorHeaderAside"
          :collapse="isCollapse"
        >
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-loading"></i>
              <span>欢迎您</span>
            </template>
            <el-menu-item index="/home">Home</el-menu-item>
            <el-menu-item index="/about/abc/def">About</el-menu-item>
            <el-menu-item index="/saoLei">扫雷</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-search"></i>
              <span>练习册</span>
            </template>
            <el-menu-item index="/testOne">TestOne</el-menu-item>
            <el-menu-item index="/testTwo">TestTwo</el-menu-item>
            <el-menu-item index="/testThree">TestThree</el-menu-item>
            <el-menu-item index="/testFour">TestFour</el-menu-item>
            <el-menu-item index="/testFive">TestFive</el-menu-item>
            <el-menu-item index="/testSix">TestSix</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-search"></i>
              <span>标签练习册</span>
            </template>
            <el-menu-item index="/testForm">TestForm</el-menu-item>
            <el-menu-item index="/testDrawer">TestDrawer</el-menu-item>
            <el-menu-item index="/testAxios">TestAxios</el-menu-item>
            <el-menu-item index="/finalPlayer">查询案例</el-menu-item>
            <el-menu-item index="/echartsTest">echartsTest</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-button type="primary" @click="go">go</el-button>
        <router-view v-slot="{ Component }">
          <transition>
            <keep-alive>
              <component :is="Component"></component>
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// import { colorHeaderAside } from "@/styles.scss";
// console.log(a.colorPrimary);
// console.log(a.colorHeaderAside);
import HeadLine from "@/components/HeadLine";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Content",
  components: {
    HeadLine,
    // New,Old,
  },
  data() {
    return {
      // colorHeaderAside,
      colorHeaderAside: "#90630d",
      // colorPrimary,
      // ls: colorHeaderAside,
      // isCollapse: false,
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
  },
  methods: {
    go() {
      // this.$store.switchCollapse()
      this.$store.commit("switchCollapse");
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../styles";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //text-align: center;
  color: #2c3e50;
}
.el-header {
  background-color: $--color-header-aside;
}
.el-aside {
  background-color: $--color-header-aside;
}
.aside-short {
  width: 64px !important;
  transition-property: width;
  transition-duration: 0.25s;
  transition-timing-function: ease-in;
}
.aside-long {
  width: 240px !important;
  transition-property: width;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
}
.el-menu {
  border-right: none;
}
.el-main {
  //background-color: #b6aa9a;
}
.app-container {
  height: 100vh;
}
</style>
